/**
 * 时间：2021-06-08
 * 作者：韩万路
 * 公司：中亿丰信息
 * 名称：svg中的链接线模块
 * 功能：主要是主要模块的组件
 * 优先级:高
 */

Vue.component("space_component_link", {
    data() {
        return {
            id: this.toUuid,
            uuid: this.toUuid, //动态数字名称

            name: "space_component_link", //当前的名称是模块的名称
            parentName: "", //当前父级模块名称
            childrenName: "", //当前子集创建的模块名称

            parentNode: null, //从谁的node
            toNode: null, //到谁的node

            data: {
                toNodeName: null, //到谁的node;
                position: {
                    x: 0,
                    y: 0,
                },
                innerSize: {
                    width: 30,
                    height: 30,
                },
                parentId: "123",
                text: "line",
                font_size: 16,

                path: {
                    M: {
                        x: 0,
                        y: 0,
                    },
                    Q: {
                        x: 0,
                        y: 0,
                    },
                    E: {
                        x: 0,
                        y: 0,
                    }
                }
            },

            isMouseDown: false,
        }
    },
    template: `
 
        <g :id="computed_toUuid+'_group1'"
            v-show="computed_toNodeShow"
            :style="{opacity:computed_toNodeIsShrinkage,pointerEvents: isMouseDown?'none':'all'}"
            v-on:mousedown="isMouseDown = true"
        >
            <!--:d="M34.5 0 Q34 -140, 80 -140"   computed_linePosition-->
            <path 
                :id="uuid" 
                class="svg_component_link"
                :d="'M' + computed_linePosition.M.x + ' ' + computed_linePosition.M.y + '    C' + computed_linePosition.C.x1 + ' ' + computed_linePosition.C.y1 + ' ' + (computed_toNodeTrue.x+80) + ' ' + (computed_toNodeTrue.y + 30/2) + ', ' + (computed_toNodeTrue.x+5) + ' ' + (computed_toNodeTrue.y + 30/2)" 
                
                
                fill="none"
                />


                <g class="svg_component_link_btn"  :transform="'translate( '+ computed_linePosition.M.x + ' ' + (computed_linePosition.M.y - 25/2) +' )'"  style="cursor:pointer" >
                    <svg  viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"  width="25" height="25">
                        <path d="M512 0C229.284469 0 0 229.284469 0 512S229.284469 1024 512 1024 1024 794.715531 1024 512 794.715531 0 512 0zM187.752402 421.384581c0-15.10257 12.242235-27.344804 27.344805-27.344804h527.903463l-68.419217-68.419218c-10.640447-10.640447-10.640447-27.916872 0-38.557319 10.640447-10.640447 27.916872-10.640447 38.557318 0l91.187486 91.187486c11.784581 11.784581 15.331397 29.518659 8.924246 44.96447-6.407151 15.44581-21.395307 25.51419-38.099665 25.514189H215.097207c-15.10257 0-27.344804-12.242235-27.344805-27.344804zM808.902793 629.960223H280.99933l68.419217 68.419218c10.640447 10.640447 10.640447 27.916872 0 38.557319-5.37743 5.37743-12.356648 8.008939-19.335865 8.008938-6.979218 0-13.958436-2.631508-19.335866-8.008938l-91.187486-91.187486a41.227727 41.227727 0 0 1-8.924246-44.96447c6.407151-15.44581 21.395307-25.51419 38.099665-25.514189H808.902793c15.10257 0 27.344804 12.242235 27.344805 27.344804s-12.242235 27.344804-27.344805 27.344804z" 
                        >
                        </path>
                        <rect x="0" y="0" width="1024" height="1024"
                        style="fill:#FF000000"/>
                    </svg>
                </g>
           
               <g  
                :id="computed_toUuid"
                class="svg_component_link_btn movetrue"   
                :transform="'translate( ' + (computed_toNodeTrue.x   )+ ' ' + (computed_toNodeTrue.y ) +' )'"  style="cursor:pointer" >
                    <svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="30" height="30">
                        <path d="M545.70715308 210.42529273v99.28729272c0 9.37353516-3.29754663 17.30346656-9.9074707 23.89855981-6.56048608 6.59014916-14.52502465 9.88769508-23.82934546 9.88769507-9.3092649 0-17.24908448-3.29754663-23.81945801-9.88769507-6.61486816-6.59509253-9.89758325-14.52502465-9.89758325-23.89855981V210.42529273c-34.78491234 3.91552734-67.72576928 13.49670411-98.88189698 28.7385869-31.16107178 15.24188209-58.49560547 34.70581055-82.05303907 58.18908644-23.52282715 23.58709741-42.92742944 50.88207984-58.19403124 82.09259034-15.2666018 31.1017456-24.83294702 64.06237817-28.69409155 98.7731328h99.29223608c9.3092649 0 17.25402856 3.39642334 23.81451464 9.98657178 6.62475562 6.59509253 9.89758325 14.52502465 9.89758254 23.79473901 0 9.37353516-3.27777099 17.20458984-9.89758254 23.89361572-6.56542945 6.49127173-14.50524903 9.78881836-23.81451464 9.78881836H210.42529273c3.85620117 34.80963135 13.42749047 67.77026391 28.69409227 98.87695289 15.2666018 31.20556641 34.67120337 58.50054955 58.19403052 82.08764696 23.52777124 23.58215333 50.89196801 42.94720435 82.05303979 58.18908644 31.15612769 15.24682617 64.14642334 24.82305884 98.87695289 28.7385869v-99.28729272c0-9.37353516 3.28765845-17.30346656 9.90252662-23.89855981 6.57531762-6.59014916 14.51019311-9.88769508 23.8244021-9.88769507 9.29937744 0 17.26391602 3.29754663 23.82440209 9.88769507 6.60992408 6.59509253 9.9074707 14.52502465 9.9074707 23.89855981V813.57470727c34.78491234-3.91552734 67.71093773-13.49670411 98.87695289-28.7385869 31.16107178-15.24188209 58.48571801-34.70581055 82.01348853-58.18908644 23.55743432-23.58709741 42.96203589-50.88207984 58.21875024-82.09259034 15.27648926-31.1017456 24.81811547-64.06237817 28.69409155-98.87695359h-99.27246045c-9.32409644 0-17.26391602-3.29260253-23.8244021-9.78387427-6.62475562-6.69396997-9.89758325-14.52008057-9.89758325-23.89361573 0-9.26971435 3.27282691-17.20458984 9.89758325-23.79473901 6.56048608-6.59014916 14.50030493-9.9865725 23.8244021-9.98657178h99.27246045c-3.86114526-34.71075463-13.42254638-67.67138648-28.69409155-98.77807618-15.25671363-31.20556641-34.66131592-58.50054955-58.21875024-82.08764696-23.50305152-23.58215333-50.85241675-42.94720435-82.00854445-58.18908644-31.17095923-15.24682617-64.15136742-24.82305884-98.88189697-28.7385869M511.99505592 141.21142578c50.39758301 0 98.46661377 9.78881836 144.20214891 29.35656762 45.71081543 19.56774926 85.1182251 45.82946778 118.23211646 78.99774122 33.10894799 33.05950928 59.43493676 72.50646949 79.00268531 118.23706055C873.00964332 413.53338623 882.78857422 461.63702416 882.78857422 512c0 50.36791992-9.77398682 98.36279297-29.35656762 144.19720483-19.56774926 45.73059106-45.89373803 85.07373047-79.00268531 118.13323974-33.11389136 33.16827416-72.52130103 59.53381347-118.23211646 79.10156203C610.46661377 872.90087914 562.39263892 882.78857422 511.99505592 882.78857422c-50.39758301 0-98.45672632-9.88769508-144.18237257-29.35656762-45.73059106-19.56774926-85.13305664-45.93328857-118.24200464-79.10156202-33.10894799-33.05950928-59.42504859-72.40264868-79.00268531-118.13323975C150.99035668 610.36279297 141.21142578 562.36297584 141.21142578 512c0-50.36791992 9.77398682-98.46661377 29.35656762-144.19720483 19.57763672-45.73059106 45.89373803-85.17755127 79.00268531-118.23706055 33.11389136-33.16827416 72.51141357-59.42999268 118.24200464-79.0026853C413.53833031 151.00024414 461.5974729 141.21142578 512 141.21142578" 
                        fill="#1296db">
                        </path>
                        <rect x="0" y="0" width="1024" height="1024"
                        style="fill:#FF000000"/>
                    </svg>
                </g>
            

        </g>
    `,
    props: ["toUuid","modelType"],
    computed: {
        computed_textWidth: function() {
            //字体长度 乘以 字体大小 加上边框
            let width = this.data.text.length * this.data.font_size + (20 * 2);

            //减去字是否是英文和标点符号
            let charCodeLine = 0;
            for (let index in this.data.text) {
                if (this.data.text[index].charCodeAt() <= 200) {
                    charCodeLine++;
                }
            }
            //当前的英文标点符号乘以字体大小除以2半个字符
            width -= (charCodeLine * this.data.font_size) / 2;

            //外加设备信息
            width += 0;

            this.data.innerSize.width = width;
            return width;
        },
        computed_toUuid: function() {
            this.id = this.toUuid;

            this.fun_thisToChildren();

            return this.toUuid;
        },
        computed_linePosition: function() {
            let path = {};
            try{
                console.log(this.parentId);
                let data = main.requestData[main.requestData.modelType][this.parentId].data;



                path = {
                    M: {
                        x: data.innerSize.width + data.position.x,
                        y: data.innerSize.height / 2 + data.position.y,
                    },

                    C: {
                        x1: (data.innerSize.width + 80) + data.position.x,
                        y1: data.innerSize.height / 2 + data.position.y,
                        x2: 70 + 500,
                        y2: 30 / 2 + 0,
                    },
                    E: {
                        x: data.innerSize.width + data.position.x + 35,
                        y: data.position.y,
                    }
                };

                //判断绝对位置是否为空为空则赋予值不为空则
                if (this.data.position.x == 0 && this.data.position.x == 0) {
                    this.data.position.x = path.E.x;
                    this.data.position.y = path.E.y;
                }
                // console.log(path);
                //判断是否使用toNode的收缩数据
                // if (this.toNode.isShrinkage != undefined) {
                //     if (!this.toNode.isShrinkage) {
                //         path.C.x2 = -70 + this.toNode.buffer.x;
                //         path.C.y2 = this.toNode.data.innerSize.height / 2 + this.toNode.buffer.y;

                //         path.E.x = -2 + this.toNode.buffer.x;
                //         path.E.y = this.toNode.data.innerSize.height / 2 + this.toNode.buffer.y;

                //     }
                // }




                this.data.path = path;
            }catch(e)
            {
                path = {
                    M: {
                        x: 0,
                        y:0,
                    },

                    C: {
                        x1:0,
                        y1: 0,
                        x2: 0,
                        y2:0,
                    },
                    E: {
                        x: 0,
                        y: 0,
                    }
                };
            }
            
            return path;
            // 'M'+path.M.x+' '+path.M.y+'    Q'+path.Q.x+' '+path.Q.y+', '+path.E.x+' '+path.E.y
            // return 'M' + path.M.x + ' ' + path.M.y + '    C' + path.C.x1 + ' ' + path.C.y1 + ' ' + path.C.x2 + ' ' + path.C.y2 + ', ' + path.E.x + ' ' + path.E.y;
        },
        /**
         * 判断当前到谁的node节点是否显示
         */
        computed_toNodeShow: function() {
            var show1 = false;
            if (this.toNode != null) {
                // console.log("sdfasfasdfsd", this.toNode);
                if (this.toNode.isShow != undefined && this.toNode.isShow != null) {

                    show1 = this.toNode.isShow;
                }


                //判断到谁的节点当前是否被删除了
                show1 = this.toNode.data.thisDelete ? false : show1;
            }
            show1 = true;

            return show1;
        },
        computed_toNodeIsShrinkage: function() {

            if (this.toNode != null) {
                console.log(this.toNode);
                return this.toNode.isShrinkage ? this.toNode.buffer.opacity : '1';
            }
            return '1';
        },
        computed_toNodeTrue: function() {
            let retrunData = {
                x: 0,
                y: 0,
            }
            if (this.data.toNodeName != null) {
                //获取cnvas的里面的内容
                let This = space_canvas_controll_fun.canvas;
                retrunData.x = This.components[this.data.toNodeName].data.data.position.x + This.components[this.data.toNodeName].data.data.innerSize.width;
                retrunData.y = This.components[this.data.toNodeName].data.data.position.y;

                this.data.position.x = retrunData.x;
                this.data.position.y = retrunData.y;
            } else {
                retrunData.x = this.data.position.x;
                retrunData.y = this.data.position.y;
            }


            
            return retrunData;
        }
    },
    methods: {

        /**
         * 获取数据
         */
        fun_getData() {
            return this.data;
        },
        /**
         * 插入数据 覆盖
         */
         fun_setData(data) {
            let newData = {...this.data,...data};
            this.data = newData;

        },
        /**
         * 初始化创建的时候获取main里面的server和app里面的值并且传入到当前
         */
        fun_initGetMainData:function(){
            //获取创建时的内存地址
            let mainData = main.requestData[this.modelType][this.id].data;
            //吧获取的数据同步到当前
            this.fun_setData(mainData);
            //吧同步后的数据发送到main里面
            this.$set(
                main.requestData[this.modelType][this.id],
                "data",
                this.fun_getData()
            );
            






            //初始化完毕更新线段
            main.fun_component_updateLink();

        },
        /**
         * 发送当前的this到外部
         */
        fun_thisToChildren: function() {
            this.$emit('increase', this);
        }
    },
    created() {

        //创建完毕后插入到当前对象
        this.fun_initGetMainData();

        
                

    }

});




